<template>
    <div class="subpage">
        <div class="banner"></div>
        <div class="subjectinfo">
            <div class="userinfo">
                <ul class="userul">
                    <li>高三年级</li>
                </ul>
                <el-menu
                    default-active="1-1"
                    class="el-menu-vertical-demo"
                    background-color="#64acfa"
                    text-color="#fff"
                    active-text-color="#64acfa">
                    <el-submenu index="1">
                        <template slot="title">
                            <span>{{ sub?sub:'语文' }}</span>
                        </template>
                        <el-menu-item index="1-1">课程一</el-menu-item>
                        <el-menu-item index="1-2">课程二</el-menu-item>
                        <el-menu-item index="1-3">课程三</el-menu-item>
                    </el-submenu>
                </el-menu>
            </div>
            <div class="subinfo">
                 <img src="/static/image/type1.png" class="type1" alt="">
                <div class="back">返回上一页 >></div>
                <div class="subbox">
                    <div class="tabnav">
                        <div class="navli" @click="type=1"><img src="/static/image/test1.png" alt=""></div>
                        <div class="navli" @click="type=2"><img src="/static/image/video.png" alt=""></div>
                        <div class="navli"  @click="type=3"><img src="/static/image/test.png" alt=""></div>
                    </div>
                    <div class="box3" v-if="type == 1">
                        <div class="title"><img src="/static/image/top1.png" alt=""></div>
                        <div class="testinfo">
                            <h2>综合题目：</h2>
                            <p>啊哈哈哈哈哈哈哈哈哈哈哈哈</p>
                        </div>
                        <br>
                        <div class="page">
                            <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="1000">
                            </el-pagination>
                        </div>
                    </div>
                    <div class="box1" v-if="type == 2">
                        <div class="title"><img src="/static/image/video1.png" alt=""></div>
                        <div class="tabinfo">
                            <div class="infoitem" v-for="(item,index) in 3" :key="index">
                                <img src="/static/image/videoitem.png" alt="">
                                <p class="tils">综合练习</p>
                                <p class="tils2">综合练习</p>
                            </div>
                        </div>
                        <div class="page">
                            <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="1000">
                            </el-pagination>
                        </div>
                    </div>
                    <div class="box2" v-if="type == 3">
                        <div class="testinfo">
                            <h2>综合题目：</h2>
                            <p>啊哈哈哈哈哈哈哈哈哈哈哈哈</p>
                        </div>
                        <br>
                        <div class="page">
                            <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="1000">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
export default {
    data(){
        return{
            sub:'',
            type:1
        }
    },
    mounted(){
         const id = this.$route.params.id;
            let subList =[
                {label:'语文',value:1},
                {label:'数学',value:2},
                {label:'化学',value:3},
                {label:'英语',value:4},
                {label:'物理',value:5},
                {label:'生物',value:6}
            ];
            subList.forEach((item)=>{
                if(item.value == id){
                 return  this.sub = item.label;
                }
            })
    }
}
</script>


<style lang='scss' scoped>
.subpage{
    .banner{
        width: 100%;
        height: 360px;
        background: url('/static/image/bannerpic.png') no-repeat;
        background-size:100% 100%;
        background-position: center; 
    }
    .subjectinfo{
        width: 1200px;
        margin: 0 auto;
        background-color: #64acfa;
        padding: 10px;
        min-height: 500px;
        display: flex;
        margin-top: 20px;
        margin-bottom: 20px;
       
        .userinfo{
            width: 200px;
            height: 100%;
            .userul{
                width: 100%;
                color: #fff;
                padding-left: 20px;
                padding-top: 20px;
                li{
                    height: 45px;
                    .text2{text-indent: 2em;line-height: 30px;}
                }
            }
            .el-menu-item.is-active {
                 background-color: #fff !important;
            }
        }
        .subinfo{
            flex: 1;
            min-height: 500px;
            background-color: #fff;
            padding: 10px;
             position: relative;
            .type1{
                position: absolute;
                left: 0;
                top:0;
                z-index: 0;
            }
            .back{
                width: 100%;
                text-align: right;
                color:#64acfa;
                cursor: pointer;
            }
            .subbox{
                width: 100%;
                box-sizing: border-box;
                .tabnav{
                    width: 100%;
                    display: flex;
                    display: -webkit-flex;
                    justify-content: space-around;
                    padding: 10px 224px;
                    .navli{
                        width: 120px;
                        background-color: #64acfa;
                        img{width: 100%;height: 100%;cursor: pointer;}
                    }
                }
                .box3{
                    width: 100%;
                    min-height: 300px;
                    box-sizing: border-box;
                    margin: 65px auto 10px;
                    padding: 10px;
                    border: 1px solid #64acfa;
                    border-radius: 10px;
                    .title{width: 100%;text-align: center;
                        img{width: 180px;height: 35px;}
                    }
                    .page{width: 100%;text-align: center;margin-top: 30px;}

                }
                .box2{
                    width: 100%;
                    min-height: 300px;
                    box-sizing: border-box;
                    margin: 65px auto 10px;
                    padding: 10px;
                    border: 1px solid #64acfa;
                    border-radius: 10px;
                    .page{width: 100%;text-align: center;margin-top: 30px;}
                }
                .box1{
                    .page{width: 100%;text-align: center;margin-top: 30px;}
                     width: 100%;
                    box-sizing: border-box;
                    margin: 65px auto 10px;
                    padding: 20px 10px 30px;
                    border: 1px solid #64acfa;
                    border-radius: 10px;
                    .title{width: 100%;text-align: center;
                        img{width: 180px;height: 35px;}
                    }
                    .tabinfo{
                        display: flex;
                        justify-content: space-around;
                        .infoitem{
                            padding: 10px 20px;
                            img{height: 160px;width: 100%}
                            .tils2{
                                color: #ccc;
                                font-size: 13px;
                                line-height: 16px;
                            }
                        }
                    }

                }
            }
        }

    }
}

  .subbox{
   
  }
</style>